<template>
  <div>
    <el-card shadow="hover" class="main-el-card">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-icon size="60"><UserFilled /></el-icon>
        </el-col>
        <el-col :span="18" style="text-align: center">
          <div>
            <span style="color: #fff; font-size: 16px; font-weight: bold">管理账户数</span>
          </div>
          <div style="margin-top: 10px">
            <span style="color: #fff; font-size: 20px">{{ userNumber }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Request from '@/api/request/request';
import urls from '@/api/request/urls';

const userNumber = ref<number>();

const getData = async () => {
  const resData = await new Request(urls.API_URL_BACKSTAGE_USER_MANAGE + '/count').get();
  if (resData.success) {
    userNumber.value = resData.data;
  }
};
onMounted(async () => {
  await getData();
});
</script>

<style scoped>
.main-el-card {
  height: 120px;
  min-width: 200px;
  overflow: hidden;
  background-color: #64b0f2;
  color: #fff;
}
</style>
